<template>
  <ContainerGroup class="wraper">
    <Container style="margin-bottom: 10px">
      <FilterForm
        ref="filterForm"
        :elements="elements"
        @submit="handleSearch"
        @reset="handleReset"
      >
        <Button icon="add" type="plain" @click="handleAdd">新增</Button>
      </FilterForm>
    </Container>
    <Container height="fill">
      <div class="table-box">
        <el-table
          :data="tableData"
          row-key="id"
          border
          size="mini"
          height="100%"
          default-expand-all
          :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        >
          <el-table-column prop="name" label="菜单" />
          <el-table-column prop="icon" label="图标">
            <template v-slot="{ row }">
              <span>
                <i :class="['iconfont', `${row.icon}`]" />
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="path" label="路由网址" />
          <el-table-column prop="sortOrder" label="排序" />
          <el-table-column label="操作" width="180">
            <template v-slot="{ row }">
              <Tooltip
                content="添加子集"
                icon="icon-piliangtianjia"
                @click="handleChildAdd(row)"
              />
              <Tooltip content="编辑" icon="edit" @click="handleEdit(row)" />
              <Tooltip
                content="删除"
                type="warning"
                icon="delete"
                @click="handleDelete(row)"
              />
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 新增、编辑 -->
      <Drawer
        ref="drawerRef"
        :title="title"
        :visible.sync="showDrawer"
        width="420px"
        :footer-btns="[
          {
            text: '确认',
            type: 'primary',
            loading: qrLoading,
            trigger: 'submit',
          },
          {
            text: '取消',
            type: 'info',
            trigger: 'cancel',
          },
        ]"
        @submit="handleSubmit"
        @cancel="showDrawer = false"
      >
        <el-form
          v-if="showDrawer"
          ref="drawerForm"
          :model="drawerForm"
          :rules="drawerRules"
          label-width="120px"
          size="mini"
          class="demo-drawerForm"
        >
          <el-form-item label="菜单名称：" prop="name">
            <el-input
              v-model.trim="drawerForm.name"
              placeholder="请输入"
              maxlength="20"
              clearable
            />
          </el-form-item>
          <el-form-item label="图标：">
            <div
              ref="block-toggle"
              class="chose-block div-focus"
              @click="handleChooseIcon"
            >
              <span
                :class="[
                  drawerForm.icon ? 'block-color-fill' : 'iconText-color',
                ]"
                >{{ !drawerForm.icon ? "请选择图标" : drawerForm.icon }}</span
              >
              <span :class="[isDj ? 'chose-cart' : '']">
                <i
                  :class="[
                    'el-icon-arrow-down',
                    'iconText-color',
                    isDj ? 'chose-cart' : 'is-reverse',
                  ]"
                />
              </span>
            </div>
          </el-form-item>
          <el-form-item label="路由网址：" prop="path">
            <el-input
              v-model.trim="drawerForm.path"
              placeholder="请输入"
              clearable
            />
          </el-form-item>
          <el-form-item label="排序：" prop="sortOrder">
            <el-input
              v-model.trim="drawerForm.sortOrder"
              placeholder="请输入"
              maxlength="9"
              clearable
            />
          </el-form-item>
          <el-form-item label="状态：" prop="status">
            <el-switch
              v-model="drawerForm.status"
              active-value="1"
              inactive-value="2"
            >
            </el-switch>
          </el-form-item>
        </el-form>
      </Drawer>
      <!-- 图标弹窗 -->
      <Dialog
        id="dialogWraper"
        class="dialog-wraper"
        :title="iconTitle"
        :visible="iconVisible"
        @cancel="() => (iconVisible = false)"
      >
        <div class="wraper-box">
          <div
            v-for="(item, index) in iconList"
            :key="index"
            class="icon-box"
            @click="handleClickIcon(item)"
          >
            <i :class="['iconfont', `${item.font_class}`]" />
          </div>
        </div>
      </Dialog>
    </Container>
  </ContainerGroup>
</template>
<script>
import { selectSysMenuVO, saveOrUpdateMenu, remove } from '@/api/menu'
import iconList from "@/utils/iconSet";
export default {
  data() {
    return {
      btnType: 1,
      iconList,
      iconVisible: false,
      iconTitle: "图标",
      isDj: false,
      iconVisible: false,
      qrLoading: false,
      drawerForm: {
        name: "",
        icon: "",
        path: "",
        sortOrder: "",
        status: "",
      },
      drawerRules: {
        name: [
          { required: true, message: "请输入菜单名称", trigger: "blur" },
        ],
        path: [
          { required: true, message: "请输入路由网址", trigger: "blur" },
        ],
        sortOrder: [{ required: true, message: "请输入排序", trigger: "blur" }],
      },
      darawerLoading: false,
      showDrawer: false,
      title: "",
      tableLoading: false,
      tableData: [],
      newCondition: {},
      elements: [
        {
          label: "",
          type: "input",
          key: "menuName",
          value: "",
          placeholder: "请输入菜单名称",
          width: 200,
        },
      ],
      currentRow: {},
    };
  },
  created() {},
  methods: {
    handleClickIcon(item) {
      // 小图标点击
      this.iconVisible = false;
      this.drawerForm.icon = item.font_class;
    },
    handleChooseIcon() {
      // 选择图标
      this.iconVisible = true;
    },
    // 新增、编辑--保存
    handleSubmit() {
      this.$refs['drawerForm'].validate(valid => {
        if (valid) {
          if (!/^[0-9]\d*$/.test(this.drawerForm.sortOrder)) {
            this.$message.warning('请输入数字')
            return
          }
          const param = {
            ...this.drawerForm
          }
          if (this.btnType === 2) {
            // 编辑
            param.id = this.currentRow?.id
            param.parentId = this.currentRow?.parentId
          } else if (this.btnType === 1) {
            // 添加菜单
            param.parentId = 0
          } else {
            // 添加子菜单
            param.parentId = this.currentRow?.id
          }
          this.qrLoading = true
          saveOrUpdateMenu(param).then(res => {
            this.qrLoading = false
            if (res.code === 200) {
              this.$eventBus.$emit('handleRefreshMenu')
              this.getData()
              this.$refs.filterForm.reset()
              this.showDrawer = false
              this.$message.success(res.msg)
            } else {
              this.$message.error(res.msg)
            }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    handleChildAdd(row) {
      // 添加子集
      this.btnType = 3;
      this.currentRow = row;
      this.title = "添加菜单";
      this.$handleSetForm(this.drawerForm, 0);
      this.showDrawer = true;
    },
    // 新增
    handleAdd() {
      this.btnType = 1;
      this.title = "添加菜单";
      this.$handleSetForm(this.drawerForm, 0);
      this.showDrawer = true;
    },
    handleSetForm(row) {
      this.$handleSetForm(this.drawerForm, 1, row);
    },
    handleEdit(row) {
      // 编辑
      this.btnType = 2;
      this.currentRow = row;
      this.handleSetForm(row);
      this.title = "编辑菜单";
      this.showDrawer = true;
    },
    // 数据
    getData() {
      const params = {
        menuName: this.newCondition.menuName
      }
      this.tableLoading = true
      selectSysMenuVO(params)
        .then(res => {
          this.tableLoading = false
          if (res.code === 200) {
            this.tableData = res.data
          } else {
            this.$message.error(res.msg)
          }
        })
        .catch(() => {
          this.tableLoading = false
        })
    },
    handleDelete(row) {
      // 删除
      this.$ckConfirm({
        content: '此操作将删除该条记录，并无法恢复， 是否继续?',
        title: '提示',
        okFn: res => {
          remove({
            id: row.id
          }).then(res => {
            if (res.code === 200) {
              this.currentPage = 1
              this.getData()
              this.$message.success(res.msg)
            } else {
              this.$message.error(res.msg)
            }
          })
        },
        cancelFn: res => {
          console.log('取消')
        }
      })
    },
    // 查询
    handleSearch(value) {
      this.newCondition = value;
      this.currentPage = 1;
      this.getData();
    },
    // 重置
    handleReset(val) {
      this.handleSearch(val);
    },
  },
};
</script>
<style lang="less" scoped>
.dialog-wraper {
  .wraper-box {
    width: 480px;
    height: 300px;
    margin-right: -10px;
    overflow: auto;

    .icon-box {
      text-align: center;
      display: inline-block;
      width: calc((100% - 100px) / 10);
      margin-right: 10px;
      margin-bottom: 10px;
      cursor: pointer;
    }
  }
}

.wraper {
  .undline {
    height: 30px;
    display: flex;
    align-items: center;
    margin-bottom: 5px;
    font-weight: 700;
    &::before {
      content: "";
      height: 15px;
      border-right: 2px solid #217dfa;
      margin-right: 10px;
    }
  }
  .table-box {
    height: 100%;
    overflow: hidden;
  }
  .is-reverse {
    transform: rotateZ(0deg);
    transition: transform 0.3s;
  }

  .chose-cart {
    transform: rotateZ(90deg);
    transition: transform 0.3s;
  }

  .iconText-color {
    color: #c0c4cc;
  }

  .block-color-fill {
    color: #606266;
  }
  .chose-block {
    display: flex;
    justify-content: space-between;
    align-items: center;
    -webkit-appearance: none;
    background-color: #fff;
    border-radius: 4px;
    border: 1px solid #dcdfe6;
    box-sizing: border-box;
    color: #dcdfe6;
    min-height: 28px;
    line-height: 28px;
    outline: 0;
    padding: 0 15px;
    transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
    width: 100%;
    cursor: pointer;
    font-size: 12px;
    text-overflow: ellipsis;
  }

  .div-focus {
    &:hover {
      border: 1px solid #409eff;
    }
  }
}
</style>
